<template>
    <template v-for="menu in menus">
        <el-sub-menu :index="menu.meta.menuId" v-if="menu.children && menu.children.length">
            <template #title>
                <span>{{menu.meta.menuTitle}}</span>
            </template>
            <sidebar-item :menus="menu.children"></sidebar-item>
        </el-sub-menu>
        <el-menu-item v-else-if="menu.meta.isMenu"
                      :index="menu.meta.menuId"
                      @click="open(menu)"
        >
            <span>{{menu.meta.menuTitle}}</span>
        </el-menu-item>

    </template>
</template>

<script setup>
    import {defineProps} from 'vue';
    import { useStore} from 'vuex'
    import { useRouter } from 'vue-router'

    import {view} from '@/router/view'

    const store = useStore();
    const router = useRouter();

    const props = defineProps(['menus']);

    const open = function (menu) {
      router.push({
        path: menu.path
      });
    };

    const vaildActive = function (item) {
      let curRoute = router.currentRoute.value;
      return curRoute.path === item.path;
    }
</script>

<style scoped lang="less">


</style>
